
.button-download-lick-delete-list {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    justify-content: flex-end;
    height: 40px;
    padding: 8px;
    gap: 12px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(60px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    .tool-btn {
        cursor: pointer;
    }

    img {
        width: 24px;
        height: 24px;
    }

    

}


.video-library-thumbnail-item,.video-library-videocontainer-video{
    .button-download-lick-delete-list{
        &.islike{
            opacity: 1;
            max-width: 40px;
    
            .delete-btn,.download-btn {
                display: none;
                width: 0px;
                overflow: hidden;
                transition: all 0.2s ease;
            }
           
        }
    }
}


// 删除确认弹窗样式
.delete-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
    width: 100vw;
    height: 100vh;
  
    .delete-modal-content {
        background: #26262C;
        width: 500px;
        height: 184px;
        box-shadow: 0px -4px 24px 0px rgba(0, 0, 0, 0.08),0px 4px 24px 0px rgba(0, 0, 0, 0.08);
        animation: slideIn 0.3s ease;
  
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 24px 12px 24px;
  
        h3 {
            font-family: Inter;
            font-size: 20px;
            font-weight: bold;
            line-height: 24px;
            color: #FAFAFC;
        }
  
        .close-btn {
          background: transparent;
          cursor: pointer;
          height: 24px;
          img {
            width: 24px;
            height: 24px;
            display: block;
          }
          
         
        }
      }
  
      .modal-body {
        padding: 8px 24px 24px 24px;
        
        p {
            font-family: Inter;
            font-size: 14px;
            font-weight: normal;
            line-height: 20px;
           
            color: #8F91A8;
        }
      }
  
      .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding:  0 24px 24px 24px;
  
        button {
          padding: 10px 24px;
          border: none;
          
          cursor: pointer;
          font-family: Inter;
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          
          transition: all 0.2s ease;
  
          &.cancel-btn {
            background: #33333A;
            color: #FAFAFC;
  
            &:hover {
                background: #33333A;
            }
            &:active {
                background: #33333A;
            }
            
          }
  
          &.confirm-btn {
            background: #3F00FF;
            color: #FFFFFF;
            &:hover {
             background: #420BE5;
            }
  
            &:active {
                background: #4214CC;
            }
          }
        }
      }
    }
  }
  
  // 动画效果
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  // 防止背景滚动
  body.modal-open {
    overflow: hidden;
  }